<template>
  <div>
    <Table
      border
      :loading="loading"
      :columns="columns"
      :data="data"
      :height="tableHeight"
    >
    <template slot-scope="{ row }" slot="coursePicOperation">
        <div @click="$cu.previewImage(row.coursePic)" style="width: 40px; height:40px; margin: auto;">
          <img v-if="row.coursePic!=null" :src="row.coursePic" style="width: 100%; height: 100%;"/>
        </div>
      </template>
      <template slot-scope="{ row }" slot="operation">
        <div class="flex">
          <Button
            class="mr_20"
            type="primary"
            size="small"
            :style="{ color: '#ffffff', padding: '0 8px' }"
            @click="onDetail(row)"
            >详情</Button
          >
        </div>
      </template>
    </Table>
    <div class="cus_page" v-if="pages.pageTotal > 0">
      <cus-page :data="pages" class="mt_20" @pageChange="postOutRecordsApi()"></cus-page>
    </div>
    <!--详情页面-->
    <detaile ref="detaile"></detaile>
  </div>
</template>
<script>
import {
  postOutRecords,
} from "@/api/organ/manager";
import detaile from "./components/detaile.vue"

export default {
  components: { detaile },
  data() {
    return {
      loading: false,
      data: [
      ],
      columns: [
      {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "伙食单位",
          key: "unitName",
          resizable: true,
          minWidth: 200,
          align: "center",
        },
        {
          title: "类型",
          key: "storageWayName",
          resizable: true,
          minWidth: 200,
          align: "center",
        },
        {
          title: "单号",
          key: "storageNo",
          resizable: true,
          minWidth: 200,
          align: "center",
        },
        {
          title: "验收场景照片",
          slot: "coursePicOperation",
          resizable: true,
          minWidth: 200,
          align: "center",
        },
        {
          title: "验收日期",
          key: "createTime",
          resizable: true,
          minWidth: 200,
          align: "center",
        },
        {
          title: "操作",
          width: 245,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 290; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    onInit() {
      this.pages.page = 1;
      this.postOutRecordsApi();
    },
    onDetail(row) {
      this.$refs['detaile'].form = row
      this.$refs['detaile'].show();
    },
    // 出库列表
    postOutRecordsApi() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let params = {
          timeStart:  new Date(this.form.dateTime[0]).Format('yyyy-MM-dd'),
          timeStop: new Date(this.form.dateTime[1]).Format('yyyy-MM-dd'),
          unitCode: this.form.unitCode == 'all' ? '' : this.form.unitCode,
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
        }
        postOutRecords(params).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.data = res.data.list;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        }).catch((err)=>{
          reject(err);
        })
      });
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 365; // 表格自适应高度
      }, 100);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>